<template>
  <!-- 新增弹框 -->
  <el-dialog
    title="编辑角色"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="$store.state.settings.showDialog"
  >
    <el-form
      ref="roleForm"
      :model="roleForm"
      :rules="rules"
      label-width="100px"
      @keydown.native="xxx(e)"
    >
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="roleForm.name" />
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input v-model="roleForm.description" />
      </el-form-item>
    </el-form>
    <!-- 底部 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button
          size="small"
          @click="$store.commit('settings/changeDialog')"
        >取消</el-button>
        <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { addRolesListApi, updateRole } from '@/api/settings'
export default {
  name: 'RoleDia',
  props: {
    paramsObj: {
      type: Object,
      default: () => {}
    },
    roleForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {},
  methods: {
    async hSubmit() {
      if (this.$store.state.settings.flag) {
        // console.log(this.roleForm)
        await addRolesListApi(this.roleForm)
        this.$store.dispatch('settings/getRoles', this.paramsObj)
        this.$store.commit('settings/changeDialog')
      } else {
        await updateRole(this.roleForm)
        this.$store.dispatch('settings/getRoles', this.paramsObj)
        this.$store.commit('settings/changeDialog')
      }
    },
    xxx(e) {
      if (e.keyCode === 27) {
        this.$store.commit('settings/changeDialog')
      }
    }
  }
}
</script>
<style lang="less" scoped></style>
